<%--
  Created by IntelliJ IDEA.
  User: WheelChen
  Date: 2017/4/11
  Time: 22:23
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="v-bind" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="../../static/common/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/global.css">
</head>
<body>
<div id="content">
    <div class="admin-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>个人信息</legend>
        </fieldset>

        <form class="layui-form" action="" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-inline disabled">
                    <input type="text" v-model="user.realname" class="layui-input" readOnly>
                </div>
                <label class="layui-form-label">工号</label>
                <div class="layui-input-inline disabled">
                    <input type="text" v-model="user.workid" class="layui-input" readOnly>
                </div>
            </div>
            <%-- 性别 Begin --%>
            <div v-cloak>
                <div v-show="show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <div v-if="user.sex == 1">
                                <label class="layui-form-label" style="color: #999">男</label>
                            </div>
                            <div v-else="user.sex == 2">
                                <label class="layui-form-label" style="color: #999">女</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-show="!show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input lay-filter="sex" type="radio" name="sex" value="1" title="男" v-model="user.sex">
                            <input lay-filter="sex" type="radio" name="sex" value="2" title="女" v-model="user.sex">
                        </div>
                    </div>
                </div>

            </div>
            <%-- 性别 End --%>

            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-inline">
                    <input type="text" v-model="user.mobilephone" class="layui-input" readOnly lay-verify="phone">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱地址</label>
                <div class="layui-input-inline">
                    <input type="email" name="email" v-model="user.email" class="layui-input" lay-verify="email">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">QQ号</label>
                <div class="layui-input-inline">
                    <input type="text" v-model="user.qq" class="layui-input" readOnly>
                </div>
                <label class="layui-form-label">微信号</label>
                <div class="layui-input-inline">
                    <input type="email" v-model="user.wechat" class="layui-input" readOnly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">指导实习人数</label>
                <div class="layui-form-mid layui-word">{{teacherInfo.numofst}}</div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">自我介绍</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" id="intro" v-model="teacherInfo.intro" class="layui-textarea"
                              readonly>
                    </textarea>
                </div>
            </div>

            <%--院校 Begin--%>
            <div v-cloak>
                <div class="layui-form-item">
                    <div v-show="showDepartment">
                        <div class="layui-inline">

                            <label class="layui-form-label">所属院校</label>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text"  class="layui-input" v-model="attribution.universityName">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="width: 100px;" >
                                <input type="text"  class="layui-input" v-model="attribution.schoolName">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="width: 100px;" >
                                <input type="text"  class="layui-input" v-model="attribution.departmentName">
                            </div>
                        </div>
                    </div>
                    <div v-show="!showDepartment">
                        <label class="layui-form-label">所属院校</label>
                        <div class="layui-input-inline">
                            <select name="university" lay-filter="university" lay-search>
                                <option value="">选择学校</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="school" lay-filter="school" lay-search>
                                <option value="">选择学院</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="department" lay-filter="department" lay-search>
                                <option value="">选择系部</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <%--院校 End--%>

            <div v-cloak>
                <div v-show="show">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="button" lay-filter="edit" class="layui-btn" @click="update" value="修改"
                                   lay-submit>
                        </div>
                    </div>
                </div>
                <div v-show="!show">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="button" class="layui-btn" lay-filter="save" value="保存" lay-submit>
                            <input type="button" class="layui-btn" @click="reload" value="返回">
                        </div>
                    </div>
                </div>
            </div>

        </form>

    </div>
</div>
<script type="text/javascript">
    var userId = ${sessionScope.currentUser.getId()};
</script>
<script src="../../static/js/utils.js"></script>
<script type="text/javascript" src="/static/common/layui/layui.js"></script>
<script type="text/javascript" src="/static/common/vue.min.js"></script>
<script type="text/javascript" src="/static/common/axios.min.js"></script>
<script>
    layui.use(['form', 'upload', 'jquery', 'layer'], function () {
        var form = layui.form(),
            $ = layui.jquery,
            layer = layui.layer,
            divshow = parent.divshow;//header区提示信息

        //联动对象
        var linkage = {};
        //渲染下拉框
        linkage.formRender = function (obj, tip) {
            $(obj).empty();
            $(obj).append('<option value="">' + tip + '</option>');
            form.render('select');
        };
        //读取数据库信息并写回到select框中
        linkage.read = function (obj, url, init) {
            axios.get(url)
                .then(function (res) {
                    var array = res.data.data;
                    var html = '';
                    for (var i in array) {
                        html += '<option value=' + array[i].id + '>' + array[i].name + '</option>';
                    }
                    $(obj).append(html);
                    form.render('select');
                    if (init) $(obj).next().find('[lay-value="' + init + '"]').click();
                })
                .catch(function (res) {
                    console.log(res);
                });
        };
        // 初始数据不存在
        linkage.readNoData = function (obj,url) {
            axios.get(url)
                .then(function (res) {
                    var array = res.data.data;
                    var html = '';
                    for (var i in array) {
                        html += '<option value=' + array[i].id + '>' + array[i].name + '</option>';
                    }
                    $(obj).append(html);
                    form.render('select');
                })
                .catch(function (res) {
                    console.log(res);
                });
        };

        var university = 'form select[name=university]',
            school = 'form select[name=school]',
            department = 'form select[name=department]';


        var vm = new Vue({
            el: '#content'
            , data: {
                show: true
                , showDepartment:true
                , user: {
                    id: userId
                }
                , teacherInfo: {
                    userid: userId
                }
                , attribution: {}
            }
            , methods: {
                /**
                 * 修改按钮
                 */
                update: function () {
                    form.render('radio');
                    $('#content input[type!=button]').attr("readOnly", false).removeClass("disabled");
                    $('#content textarea').attr("readOnly", false).removeClass("disabled");
                    vm.show = false;
                    if(vm.user.state==2){
                        vm.showDepartment = true;
                    }
                    else{
                        vm.showDepartment = false;
                    }
                },
                /**
                 * 返回按钮
                 */
                reload: function () {
//                    location.reload(); // textarea清空脏数据问题
                    vm.show = true;
                    vm.showDepartment = true;
                    $('#content input[type!=button]').attr("readOnly", true).addClass("disabled");
                    $('#content textarea').attr("readOnly", true).addClass("disabled");
                    $('#intro').val("");
                    vm.getInfo(vm.user.id);
                },
                /**
                 * 获取信息
                 * @param {int} userId
                 */
                getInfo: function (userId) {
                    $.ajax({
                        type: "GET",
                        url: "/teacherInfo/findOneDetail/" + userId,
                        dataType: "json",
                        success: function (Response) {
                            console.log(Response);
                            vm.user = Response.data.user;
                            if(Response.data.teacherInfo!==null) {
                                vm.teacherInfo = Response.data.teacherInfo;
                            }
                            if(vm.teacherInfo!==null&&Response.data.department!==null) {
                                vm.attribution.universityName = Response.data.universityName;
                                vm.attribution.schoolName = Response.data.schoolName;
                                vm.attribution.departmentName = Response.data.department.name;
                            }
                            //读取大学
                            if ($(university).length) {
                                linkage.formRender(university, "选择大学");
                                if (Response.data.department !== null) {
                                    linkage.read(university, '/university/findAll', Response.data.department.universityid);
                                }
                                else{
                                    linkage.readNoData(university,'/university/findAll');
                                }
                                //读取学院
                                if ($(school).length) {
                                    linkage.formRender(school, "选择学院");
                                    form.on('select(university)', function (data) {
                                        linkage.formRender(school, "选择学院");
                                        linkage.formRender(department, "选择系");
                                        if (Response.data.department !== null) {
                                            linkage.read(school, '/school/findBath/' + data.value, Response.data.department.schoolid);
                                        }
                                        else{
                                            linkage.readNoData(school,'/school/findBath/'+data.value);
                                        }
                                    });
                                    if ($(department).length) {
                                        linkage.formRender(department, "选择系");
                                        form.on('select(school)', function (data) {
                                            linkage.formRender(department, "选择系");
                                            if (Response.data.department !== null) {
                                                linkage.read(department, '/department/findBath/' + data.value, Response.data.department.id);
                                            }
                                            else{
                                                linkage.readNoData(department,'/department/findBath/' + data.value);
                                            }
                                        });
                                    }

                                }
                            }

                        },
                        error: function (msg) {
                            console.log("失败");
                            console.log(msg);
                        }
                    });
                }
            }
        });

        form.on('radio(sex)', function (data) {
            vm.user.sex = data.value
        });
        form.on('select(department)', function (data) {
            vm.teacherInfo.departmentid = data.value;
            vm.teacherInfo.schoolid = $(school).val();
        });

        vm.getInfo(userId);
        $('#content input[type!=button]').addClass("disabled");
        $('#content textarea').addClass("disabled");

        // 监听提交
        form.on('submit(save)',function () {
            var url = "";
            var data = {
                user: vm.user,
                teacherInfo: vm.teacherInfo
            };
            if(vm.teacherInfo.id == null){
                url = "/teacherInfo/addDetailOne";
            }
            else {
                url = "/teacherInfo/modifyDetailOne";
            }
            axios.post(url, data)
                .then(function (response) {
//                    console.log(response);
                    if (response.data.success) {
                        layer.msg("保存成功", {icon: 1, time: 1500}, function () {
                            //同时更新header区提示信息
                            getTips(userId, divshow);
                            vm.reload();
                        });
                    }
                    else{
                        layer.msg(response.data.message, {icon: 2, time: 1000}, function () {
                            // vm.reload();
                        });
                    }
                })
                .catch(function (response) {
                    console.log(response);
                });
            return false;
        });
    });

</script>
</body>
</html>
